<template>
<div class="row">
  <div class="col-md-3 offset-md-7">
<div class="card">
  <div class="card-header">
   注册
  </div>
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">昵称</label>
        <input type="name" class="form-control"  v-model.trim="$v.user.name.$model" aria-describedby="emailHelp" placeholder="Enter name">
        <small class="form-text text-muted" v-if="!$v.user.name.required">请输入昵称</small>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">手机</label>
        <input type="number" class="form-control" v-model="$v.user.phone.$model" aria-describedby="emailHelp" placeholder="Enter phone">
        <small class="form-text text-muted" v-if="!$v.user.phone.required">请输入手机</small>
        <small class="form-text text-muted" v-if="$v.user.phone.required && !$v.user.phone.telephone">请输入11位手机号码</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" v-model="$v.user.password.$model" placeholder="Password">
        <small class="form-text text-muted" v-if="!$v.user.password.required">请输入密码</small>
        <small class="form-text text-muted" v-if="$v.user.password.required && !$v.user.password.minLength">请输入6位以上密码</small>
      </div>
      <button  class="btn btn-primary   btn-block" @click="register()">提交</button>
  </form>
  </div>
</div>
  </div>
</div>
    
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'
import customValitor from "@/helper/validator"
import userService from '@/service/userService'
export default {
  data(){
    return {
      user : {
        name:"",
        phone:"",
        password:""
      }
    }
  },
  validations:{
    user:{
      name:{
        required,
        minLength: minLength(6)
      },
      phone:{
        required,
        telephone:customValitor.telephoneValidator
      },
      password:{
        required,
        minLength: minLength(6)
      },
    }
  },
  methods:{
    register(){
      this.$v.user.$touch();
      if(this.$v.user.$anyError){
        return
      }
      userService.register(this.user).then(res=>{
        this.$router.replace({name:'login'});
      }).catch(err=>{
        console.log("err",err.response.data.msg);
      });
      // console.log('submit!')
      // this.$v.$touch()
      // if (this.$v.$invalid) {
      //   this.submitStatus = 'ERROR'
      // } else {
      //   // do your submit logic here
      // this.submitStatus = 'PENDING'
      // setTimeout(() => {
      //   this.submitStatus = 'OK'
      // }, 500)
      
    }
    
  }
}
</script>

<style scoped>

</style>